<script setup lang="ts">
import { ref } from 'vue';
import FcDesigner from '@form-create/designer';
// 可以在此处获取设计器实例或进行其他操作
const designer = ref(null);

const config = ref<any>({
  showSaveBtn: true, // 保存按钮是否显示
  showLanguage: false, // 隐藏多语言配置
  showControl: false, // 隐藏组件的联动数据配置
  showCustomProps: false, // 隐藏组件的自定义属性配置
  showEventForm: false, // 隐藏组件的事件配置
  switchType: false, //是否可以切换组件类型,或者可以相互切换的字段
  showDevice: false, //是否显示多端适配选项
  formOptions: {
    submitBtn: {
      show: false // 隐藏提交按钮
    }
  }
});

const emait = defineEmits(['onSave']);
defineExpose({ setForm });

function saveForm(data) {
  emait('onSave', data);
}

function setForm(options, rule) {
  designer.value.setOptions(options);
  designer.value.setRule(rule);
}
</script>

<template>
  <fc-designer ref="designer" @save="saveForm" :config="config" height="100%" />
</template>

<style scoped lang="scss">
:deep(.el-container > .el-main > a) {
  z-index: -1 !important;
}
</style>
